<template>
    <div class="footer">
        <el-card class="box-card">
            <p class="title">联系我们</p>
            <div class="des">
                <p>e学云的成长，离不开热心朋友的关注与支持。</p>
                <p>希望您多提需求及建议，为e学云的完善提供源源不断的养分。</p>
            </div>
            <h5>你可以通过以下方式和我们联系：</h5>
            <div class="img-box">
                <el-row>
                    <el-col :sm="8">
                        <div>
                            <img class="img-big" src="../../../images/noticeBoard/weixin@3x.png" >
                            <ul class="text-process">
                                <li class="text">通过微信和我们交流</li>
                                <li>微信公众号：e学云APP</li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :sm="8">
                        <div>
                            <img class="img-big" src="../../../images/noticeBoard/e-mail@3x.png" >
                            <ul class="text-process">
                                <li class="text">邮件投稿</li>
                                <li>邮箱：400kefu@juziwl.com</li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :sm="8">
                        <div>
                            <img class="img-big" src="../../../images/noticeBoard/phone@3x.png" >
                            <ul class="text-process">
                                <li class="text">拨打400客服电话</li>
                                <li>客服电话：400-600-2588</li>
                            </ul>
                        </div>  
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div> 
</template>

<script>
    
</script>

<style rel="stylesheet/scss" lang="scss"  scoped>
    .footer{
        padding: 7px;
        p{
            font-size: 14px;
            color: #333;
            &.title{
                padding-bottom: 6px;
                margin-top: 20px;
                border-bottom: 1px solid #aaa;
            }
        }
        .des{
            margin-top: 10px;
            margin-bottom: 20px;
            p{
                height: 30px;
                line-height:30px;
            }
        }
        h5{
            font-size: 16px;
            color: #333;
            font-weight: normal;
        }
        .img-box{
            overflow: hidden;
            div{
                padding: 7px;
                overflow: hidden;
                display: flex;
                .img-big{
                    width: 40px;
                    height: 40px;
                }
                .text-process{
                    margin-left:10px;
                    li{
                        font-size:12px;
                        color:#333;
                        height: 20px;
                        line-height: 20px;
                        &.text{
                            font-size:14px;
                        }
                    }
                }
            }
            
        }
    }
</style>